<template>
  <nav id="emsNav">
    <div class="nav-img" @click="gotoDisplay">
      <span></span>
    </div>
    <div class="nav-tab">
      <ul>
        <li v-for="(item, index) in routerArr" :key="index" :class="{active: navActive === item.name}" @click="gotoRouter(item, index)" @mouseover="mouseover(item)" @mouseleave="mouseout(item)">
          <span :style="bgImg(item)"></span>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
  export default {
    // 组件的名称
    name: 'emsNav',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      routerArr: {
        type: Array,
        default: () => {
          return []
        }
      },
      navActive: {
        type: String,
        default: ''
      }
    },
    // 数据绑定
    data () {
      return {
      }
    },
    // 组件
    components: {},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 点击nav 跳转到对应的路由
      gotoRouter (item, index) {
        this.$emit('gotoRouter', item, index)
      },
      // 返回选择系统页面的方法
      gotoDisplay () {
        this.$emit('gotoDisplay')
      },
      // 过滤背景图片
      bgImg (item) {
        if (this.navActive === item.name) {
          return {
            background: 'url(' + require(`../../assets/newEms/${item.name}.png`) + ') center center / 100% no-repeat'
          }
        } else if (item.isMouse) {
          return {
            background: 'url(' + require(`../../assets/newEms/${item.name}.png`) + ') center center / 100% no-repeat'
          }
        } else {
          return {
            background: 'url(' + require(`../../assets/newEms/${item.name}1.png`) + ') center center / 100% no-repeat'
          }
        }
      },
      // 路由 移入移出 事件 更改图片的颜色
      // 移入事件
      mouseover (item) {
        item.isMouse = true
      },
      mouseout (item) {
        item.isMouse = false
      }
    },
    // 计算属性
    computed: {},
    // 监听
    watch: {},
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  nav {
    display: flex;
    flex-direction: column;
    height: 100%;

    .nav-img {
      flex: 0 0 110px;
      background-color: $color-126;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        cursor: pointer;
      }
      span {
        display: inline-block;
        width: 58px;
        height: 50px;
        background: url('../../assets/newEms/logo.png') no-repeat center center;
        background-size: 100%;
      }
    }

    .nav-tab {
      flex: 1;
      display: flex;
      flex-direction: column;

      li {
        height: 100px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          display: inline-block;
          width: 36px;
          height: 36px;
        }
        &:hover {
          background-color: $font-f;
          cursor: pointer;
        }
      }

      .active {
        /*.tab-link {*/
        background-color: $font-f;
        /*}*/
      }
    }
  }
</style>
